<template>
    <div>
        <!--顶部导航栏（引用组件）-->
<!--        <topNav v-bind:currentUser="currentUser"></topNav>-->
        <top-nav @updateUser="setCurrentUser"></top-nav>


        <el-row type="flex" justify="center"><!--居中显示-->
            <!--页面中心主体内容-->
            <el-col :span="18" style="border: 1px solid bisque">
                <!--顶部搜索框-->
                <el-row type="flex" justify="center">
                    <el-col :span="20">
                        <searchBar></searchBar>
                    </el-col>
                </el-row>

                <!--滚动图-->
                <el-row>
                    <el-col >
                        <el-carousel :interval="4000" type="card" height="320px">
                            <el-carousel-item v-for="item in carouselPosts" :key="item.id">
<!--                                <h3 class="medium">{{ item }}</h3>-->
<!--                                <el-image :src="require('../../assets/images/carouselDemo.jpg')" :fit='logoFit'></el-image>-->
                                <a :href="'/postInfo?pid=' + item.post.id" target="_blank">
                                    <el-image :src="item.images" :fit='logoFit'></el-image>
                                </a>
                                <div class="center crs_desc_div">
                                    {{item.describe}}
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                </el-row>

                <!--中间的主体模块-->
                <el-row type="flex" justify="center" :gutter="50">
                    <!--左侧的个人信息-->
                    <el-col :span="6" class="left_part">
                        <div v-if="this.currentUser.role === ''">
                            <el-row>
                                <el-col>
                                    我看少侠骨骼惊奇，
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    不妨<a href="/login" class="mylink">登录</a>一波~！
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <a href="/login" class="mylink">登录</a>确实没什么用，<br>
                                    但不<a href="/login" class="mylink">登录</a>是万万没什么用啊！
                                </el-col>
                            </el-row>
                        </div>
                        <div v-else class="left_info">
                            <el-row class="center">
                                <el-avatar :size="100" :src="currentUser.headImg" ></el-avatar>
                            </el-row>
                            <el-row class="center">
                                {{currentUser.nickName}}
                            </el-row>
                            <el-row class="center">
                                {{currentUser.motto}}
                            </el-row>
                            <el-row>
                                <el-col :span="10" :offset="14">
<!--                                    <el-link type="primary" v-on:click="toMyIndex" >编辑信息</el-link>-->
                                    <el-link type="primary" v-on:click="toMyIndex" >进入我的主页>></el-link>
                                </el-col>
                            </el-row>
                            <el-row class="center">
                                <el-button type="success" plain size="medium" style="width: 38%" v-on:click="publishPost">发帖</el-button>
                            </el-row>
                            <el-row class="center">
                                <el-button plain size="medium" style="width: 48%">我的贴吧</el-button>
                            </el-row>
                        </div>
                        <!--贴吧分类-->
                        <categoryList></categoryList>
                    </el-col>
                    <!--右侧的贴吧、公告及帖子展示-->
                    <el-col :span="17" >
                        <div style="border: 1px solid #99a9bf; height: 100%">
                            <Reg v-if="content === 'reg'"></Reg>
                            <indexContent v-else-if="content === 'indexContent'"></indexContent>
                            <!-- （子传父   子组件修改父组件中的变量值）
                                @updateInfo就相当v-on:updateInfo   updateInfo是子组件personInfo 中定义的事件名（类似于click）
                                在子组件中通过 this.$emit('updateInfo', this.editUser); 代码触发
                                    其中 updateInfo 是自定义的事件名， this.editUser是传递的参数
                                然后updateCurrentUser即是本页面（父组件）里定义的一个回调函数，当此事件触发时执行该回调函数（在该回调函数中能正常使用接收到的参数）
                            -->
                            <personInfo @updateInfo="updateCurrentUser" v-else-if="content === 'personInfo'"></personInfo>
                        </div>

                    </el-col>
                </el-row>

                <copy-right></copy-right>
            </el-col>
        </el-row>

        <!--返回顶部   这里不传target的值（根据他源码是可以这么做，可以直接用的，虽然我看不大懂）  target要设置的化是外部容器，而且要有一定的css样式，可以看我edge收藏夹-->
        <el-backtop></el-backtop>
    </div>
</template>

<script>
    import reg from './register.vue'
    import indexContent from "@/components/component/indexContent";
    import personInfo from "@/components/component/personInfo";
    import navigateBar from "@/components/component/navigateBar";  //顶部导航栏
    import searchBar from "@/components/component/searchBar";  // 顶部搜索栏
    import btmCopyRight from "@/components/component/btmCopyRight"; //底部的版权部分
    import categoryList from "@/components/component/categoryList"; // 左下方的 贴吧分类列表

    export default {
        name: "index",
        data(){
            return{
                // currentUser: { /*当前用户*/
                //     headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                //     nickName: '',
                //     motto: '',
                //     role: '',
                // },
                currentUser: {}, /*当前用户*/
                content:'indexContent', /*右下主体引用界面名称*/
                logoFit:'contain',  /*搜索框处左边logo 适应容器的方式*/
                role:'', /*当前登录用户 的角色   （user？ admin ？ 普通用户或管理员）*/
                carouselPosts: [], // 滚动帖 数组
            }
        },
        created(){  /*加载页面时执行*/
            if (this.$route.params.loginSuccess != null){  /*从登录页转过来的*/
                this.$message.success(this.$route.params.loginSuccess);
            }

            /*初始化用户信息*/
            // // this.$http.get("http://localhost:8081/user/getUser").then(req=>{
            // this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userGet).then(req=>{
            //     /*即使 后台返回的是null  req.data也不是null  而是空字符串""  */
            //     if (req.data !== ""){  /*从登陆过来的   session中有当前登录用户的相关信息  对页面进行初始化*/
            //         // this.currentUser.headImg = "http://localhost:8081/static/images/userAvatar/" + req.data.headImg;
            //         this.currentUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + req.data.headImg;
            //         this.currentUser.nickName = req.data.nickName;
            //         this.currentUser.motto = req.data.motto;
            //         this.currentUser.role = req.data.role;
            //         console.log("head:" + this.currentUser.headImg);
            //     }else {  /*当前session中并没有当前用户信息*/
            //         console.log("未登录");
            //         this.$notify.info({
            //             title: '提示：',
            //             message: '登录之后体验更佳哦！',
            //             offset: 50  /*使弹出的消息距屏幕边缘偏移一段距离*/
            //         });
            //     }
            // });

            // 初始化 首页滚动帖 信息（主要是 图片、描述、序号以及跳转帖子id   其他多余的信息暂时不用管）
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselGetDetailedList).then(req=>{
                if (req.data !== ""){
                    if (req.data.rs.result_code === 200){ /*查询成功   */
                        this.carouselPosts = req.data.list;

                        // 处理图片地址 (把原来的 图片名称拼接上 服务器地址)
                        for (let i = 0; i < this.carouselPosts.length; i++) {
                            this.carouselPosts[i].images = this.GLOBAL.serverBaseUrl + this.GLOBAL.crsPostImg + this.carouselPosts[i].images;
                        }
                    }else {  /*查询失败*/
                        this.$message({
                            showClose: true,
                            duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                            message: req.data.rs.msg,
                            type: 'error'
                        });
                    }
                }else {
                    this.$message.error('糟糕，服务器出事了。。 -- 获取滚动帖');
                }
            })

        },
        methods:{

            // 跳转至我的主页
            toMyIndex(){
                let routeUrl = this.$router.resolve({
                    path: "/myIndex",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {uname: this.currentUser.uname},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                });

                //在当前页打开
                window.open(routeUrl.href, "_self");
            },

            // 设置当前用户信息
            setCurrentUser(curUser){
                this.currentUser = curUser;

                 /*当前session中并没有当前用户信息*/
                if (this.currentUser.role === ''){
                    console.log("未登录");
                    this.$notify.info({
                        title: '提示：',
                        message: '登录之后体验更佳哦！',
                        offset: 50  /*使弹出的消息距屏幕边缘偏移一段距离*/
                    });
                }
            },

            /*以新标签页的方式打开发帖界面*/
            publishPost(){
                let routeUrl = this.$router.resolve({
                    path: "/publishPost",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    // query: {role: this.currentUser.role},  //通过 query（params不行） 传参   在目标页面通过 this.$route.params.role 来接收参数
                });

                //以新标签页的方式打开
                window.open(routeUrl.href, "_blank");
            },
            updateCurrentUser(newUser){
                console.log("enter callback function");
                console.log("received user:" + newUser);
                this.currentUser.headImg = newUser.headImg;
                this.currentUser.nickName = newUser.nickName;
                this.currentUser.motto = newUser.motto;
                if (newUser.role === "管理员"){  //因为在 personInfo页面传来的是 editUser(他的role的值是“管理员”或“普通用户”，这里需要转一下才能判断)
                    this.currentUser.role = 'admin';
                }else {
                    this.currentUser.role = 'user';
                }
            },


            /*将右侧的信息页跳转到个人信息personInfo界面*/
            toPersonInfo(){
                this.content = 'personInfo';
            },

            toLogin(){

            },

        },
        components:{
            'Reg': reg,
            'indexContent': indexContent,
            'personInfo': personInfo,
            'topNav': navigateBar,
            'searchBar': searchBar,
            'copyRight': btmCopyRight,
            "categoryList": categoryList, /*左下方的贴吧分类列表*/
        }

    }
</script>

<style scoped>

    /*上方 滚动图的描述 div*/
    .crs_desc_div{
        width: 100%;
        height: 25px;
        position: absolute;
        z-index: 99;
        background-color: rgba(255, 255, 255, 0.5);
        bottom: 0px;
    }

    /*左边的个人信息 col*/
    .left_part{
        border: 1px solid bisque;
        background-color: rgb(246,247,251);
        padding-top: 18px;
        padding-bottom: 30px;
        border-radius: 0 12px 12px 0; /*上左 上右 下右 下左*/
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)*/
    }

    .left_info>.el-row:nth-child(2){  /*用户名*/
         margin-top: 20px;
     }
    .left_info>.el-row:nth-child(3){  /*个性签名*/
        margin-top: 5px;
    }
    .left_info>.el-row:nth-child(4){  /*"编辑信息"*/
        margin-top: 12px;
    }
    .left_info>.el-row:nth-child(5){  /*发帖按钮行*/
        margin-top: 50px;
    }
    .left_info>.el-row:nth-child(6){  /*我的贴吧按钮行*/
        margin-top: 12px;
    }


    /*滚动图有关（待会儿再改）*/
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>